<template>
  <article class="container">
    <search-form ref="searchForm" :form="search" @fetchData="fetchData">
      <FormItem prop="code">
        <Input type="text" v-model="search.code" placeholder="标识关键字" />
      </FormItem>
      <FormItem prop="name">
        <Input type="text" v-model="search.name" placeholder="名称关键字" />
      </FormItem>
    </search-form>
    <article class="table-data">
      <Table :columns="columns" :data="list">
      </Table>
      <pagination :page="page" @on-change="fetchData"/>
    </article>
  </article>
</template>
<script>
import {mapState, mapActions} from 'vuex'
import util from "@/libs/util";
import searchForm from '@/components/common/searchForm.vue'
import pagination from '@/components/common/pagination.vue'
import admin from "@/api/admin";

export default {
  name: 'index',
  components: {
    pagination,
    searchForm
  },
  data() {
    return {
      search: {
        code: '',
        name: ''
      },
      columns: [
        {
          title: 'ID',
          key: 'id'
        },
        {
          title: '名称',
          key: 'name'
        },
        {
          title: '标识',
          key: 'code'
        },
        {
          title: '模块',
          key: 'module'
        }
      ],
    };
  },
  computed: {
    ...mapState({
      list: state => state.permission.list,
      page: state => state.permission.page,
    })
  },
  mounted() {
    this.$refs.searchForm.handleSearch();
  },
  methods: {
    ...mapActions(['getPermissionList']),
    // 查询
    fetchData() {
      this.getPermissionList();
    },
    // 删除
    handleDel(id) {
      util.confirm('是否确认删除？', () => {
        console.log(123);
        admin.delete(id).then(() => {
          util.success('操作成功');
          this.fetchData();
        });
      })
    },
    // 跳转
    toPathLink(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
